<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>三角形实现</title>
		<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
		<style>
			.wrapper {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}

			.rectangle {
				height: 0;
				width: 0;
				border: 50px solid red;
			}

			.rectangle1:before {
				content: '';
				height: 100px;
				width: 100px;
				display: block;
				background-color: red;
			}

			.rectangle2 {
				height: 100px;
				width: 200px;
				display: block;
				background-color: red;
			}

			.triangle {
				height: 0;
				width: 0;
				border: 50px solid transparent;
				border-left-color: red;
			}

			.sector {
				height: 0;
				width: 0;
				border: 50px solid transparent;
				border-top-color: red;
				border-radius: 50px;
			}

			.round {
				height: 100px;
				width: 100px;
				border-radius: 50%;
				background-color: red;
			}

			.square1 {
				width: 10%;
				height: 10vw;
				background: tomato;
			}
			/* 利用元素的margin/padding百分比是相对父元素width的性质来实现 */
			.square2 {
				width: 20%;
				height: 0;
				padding-top: 20%;
				background: orange;
			}

			.square3 {
				width: 30%;
				overflow: hidden;
				background: yellow;
			}

			/* 伪元素的 margin 和 padding 百分比是相对其当前当前元素的 */
			.square3::after {
				content: '';
				display: block;
				margin-top: 100%;
			}

			.square4 {
				border: 10vw solid red;
				height: 0;
				width: 0;
			}
		</style>
	</head>

	<body>
		<h1>矩形</h1>
		<div class="wrapper">
			<div class="rectangle"></div>
			<div class="rectangle1"></div>
			<div class="rectangle2"></div>
		</div>
		<hr />
		<h1>自适应矩形</h1>
		<div class="wrapper">
			<!-- <div class="square1"></div>
			<div class="square2"></div> -->
			<div class="square3"></div>
			<!-- <div class="square4"></div> -->
		</div>
		<hr />
		<h1>右向三角形 & 上向扇形</h1>
		<div class="wrapper">
			<div class="triangle"></div>
			<div class="sector"></div>
		</div>
		<hr />
		<h1>圆形</h1>
		<div class="round"></div>
	</body>
</html>
